<template>
	<view class="comp-resource-store">
		<view class="hd">材料仓库</view>
		<view class="bd">
			<view class="item">
				<view class="label">书页</view>
				<view class="value">0</view>
			</view>
			<view class="item">
				<view class="label">毛皮</view>
				<view class="value">0</view>
			</view>
			<view class="item">
				<view class="label">五行丹</view>
				<view class="value">0</view>
			</view>
			<view class="item">
				<view class="label">强化石</view>
				<view class="value">{{player.resource.strengthen_stone.toLocaleString('en-US')}}</view>
			</view>
			<view class="item">
				<view class="label">金刚石</view>
				<view class="value">{{player.resource.diamond_stone.toLocaleString('en-US')}}</view>
			</view>
			<view class="item">
				<view class="label">装备精华</view>
				<view class="value">0</view>
			</view>
			<view class="item">
				<view class="label">宝石碎片</view>
				<view class="value">0</view>
			</view>
			<view class="item">
				<view class="label">黑铁矿石</view>
				<view class="value">0</view>
			</view>
			<view class="item">
				<view class="label">战纹精华</view>
				<view class="value">0</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState} from "vuex";
	export default {
		name:"comp-resource-store",
		computed : {
			...mapState(['mod_player']),
			player(){
				return this.mod_player.player
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.comp-resource-store{
		display: flex;
		flex-direction: column;
		.hd{
			height:30px;
			border-top: 1px solid #000;
			border-bottom: 1px solid #000;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: $game-color-2;
		}
		.bd{
			flex:1;
			display: flex;
			flex-direction: column;
			.item{
				display: flex;
				border-bottom: 1px solid #000;
				box-sizing: border-box;
				height:30px;
				&:nth-child(2n){
					background-color: $game-color-2;
				}
				// &:last-child{
				// 	border-bottom: none;
				// }
				.label{
					width:80px;
					border-right: 1px solid #000;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.value{
					flex:1;
					display: flex;
					align-items: center;
					padding-left:10px;
				}
			}
		}
	}
</style>